<template>
  <div v-if="chatData!=null" style="background-color: #ede6e6;height: 100%">
    <van-cell-group inset>
      <!-- wrap自动换行 -->
      <van-row wrap style="">
        <van-col @click="console.log('好友信息')" style="margin-left:10px;margin-top:10px;" v-for="user in chatData?.userList">
          <van-image
              radius="3px" :src="user.avatarUrl" style="height: 55px;width: 55px" fit="cover">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
          <div style="width:50px;display:flex;justify-content: center" @click="console.log('邀请')">
            <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 10px;color: #969799;">
              {{user.username}}
            </span>
          </div>
        </van-col>

        <van-col style="margin-left: 10px;margin-top:10px;display:flex;align-items: center;justify-content:center;height: 55px;width: 55px">
          <van-image src="http://120.26.146.100:8889/public/inviteFriend.png" style="height: 40px;width: 40px;">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </van-col>
      </van-row>
    </van-cell-group>


    <!-- 其他信息 名称+公告+备注-->
    <van-cell-group inset style="margin-top: 10px">
      <van-cell title="群聊名称" :value="chatData.name" is-link @click="console.log('群聊名称')"/>
      <van-cell v-if="chatData.type == 0" title="群公告" is-link @click="console.log('群公告')">
        <template #label>
          <div style="width:145px;display:flex;justify-content: center">
            <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 12px;color: #969799;">
              {{ chatData.extJson }}
            </span>
          </div>
        </template>
      </van-cell>
      <van-cell title="备注" :value="chatData.notesName != null ? chatData.notesName : ''" is-link @click="console.log('备注')"/>
    </van-cell-group>

    <!-- 消息免打扰 + 置顶聊天 todo 怎么修改消息免打扰会好一点-->
    <van-cell-group inset style="margin-top: 10px">
      <van-cell title="消息免打扰">
        <template #right-icon>
          <van-switch v-model="isDisturb" />
        </template>
      </van-cell>
      <van-cell title="置顶聊天">
        <template #right-icon>
          <van-switch v-model="isTopping" disabled/>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 清除+投诉 -->
    <van-cell-group inset style="margin-top: 10px">
      <van-cell title="设置当前聊天背景" is-link @click="console.log('设置当前聊天背景')"/>
      <van-cell title="清空聊天记录" is-link @click="console.log('清空聊天记录')"/>
      <van-cell title="投诉" is-link @click="console.log('投诉')"/>
    </van-cell-group>

    <van-button v-if="chatData.type == 0" style="margin-top: 10px" type="danger" block @click="console.log('退出群聊')">
      退出群聊
    </van-button>

  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {chatStore} from "../stores/chat/chat.ts";

const chatData = ref();
const isDisturb = ref(false);
const isTopping = ref(false);
const chatStoreAPI = chatStore();


onMounted (()=>{
  chatData.value = chatStoreAPI.getChatData();
});

</script>

<style scoped>


</style>